<template>
  <view class="date-card-container">
    <!-- 左侧可滑动日期区域 -->
    <scroll-view class="date-scroll" scroll-x enhanced show-scrollbar="false">
      <!-- 单个选择 -->
      <view v-if="!isMultipleSelect" class="scroll-content">
        <!-- 日期卡片 -->
        <view v-for="(item, index) in dates" :key="index" class="date-card"
          :class="{ active: !readOnly && currentActiveIndex === index }" @tap="handleSingleTap(index)">
          <text class="date-text">{{ item.date || item.Datevalue1 || item.DateName1 }}</text>
          <text class="week-text">{{ item.week || item.WeekName }}</text>
          <view v-if="item.DaiThroughNumber && item.DaiThroughNumber.length > 0" class="point point-red">
            {{ item.DaiThroughNumber.length > 99 ? '99+' : item.DaiThroughNumber.length }}
          </view>
          <view
            v-else-if="(item.ThroughNumber || item.JuThroughNumber) && ((item.ThroughNumber?.length && parseInt(item.ThroughNumber.length) || 0) + (item.JuThroughNumber?.length && parseInt(item.JuThroughNumber.length) || 0)) > 0"
            class="point point-blue">
            {{ ((item.ThroughNumber?.length && parseInt(item.ThroughNumber.length) || 0) + (item.JuThroughNumber?.length
              && parseInt(item.JuThroughNumber.length) || 0)) > 99 ? '99+' : (item.ThroughNumber?.length &&
                parseInt(item.ThroughNumber.length) || 0) + (item.JuThroughNumber?.length &&
                  parseInt(item.JuThroughNumber.length) || 0) }}
          </view>
        </view>
      </view>
      <!-- 多个选择 -->
      <view v-else class="scroll-content">
        <!-- 日期卡片 -->
        <view v-for="(item, index) in dates" :key="index" class="date-card" :class="{ active: !readOnly && item.is }"
          v-if="!isShowAll" @tap="handleMultiTap(index)">
          <text class="date-text">{{ item.date || item.Datevalue1 }}</text>
          <text class="week-text">{{ item.week || item.WeekName }}</text>
        </view>
        <view v-else class="date-card" @tap="handleMultiTap(index)">
          <text class="date-text">{{ item.date || item.Datevalue1 }}</text>
          <text class="week-text">{{ item.week || item.WeekName }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 右侧固定全部班期 -->
    <view v-if="dates && dates.length >= 5" class="fixed-all" @tap="showAll">
      <text class="all-text">全部</text>
      <text class="period-text">班期</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DateCard',
  props: {
    dates: {
      type: Array,
      default: () => []
    },
    isMultipleSelect: {
      type: Boolean,
      default: false
    },
    isShowAll: {
      type: Boolean,
      default: false
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      activeIndexList: [],
      currentActiveIndex: this.activeIndex // 初始化当前激活索引
    }
  },
  watch: {
    activeIndex(newVal) {
      this.currentActiveIndex = newVal;
    }
  },
  methods: {
    // 选择单个日期
    selectDate(index) {
      this.currentActiveIndex = index; // 更新当前激活索引
      this.$emit('change', this.dates[index])
    },
    handleSingleTap(index) {
      if (this.readOnly) return
      this.selectDate(index)
    },
    // 选择多个日期
    selectDateMultiple(index) {
      let list = this.activeIndexList

      if (list.includes(index)) {
        list = list.filter(el => el !== index)
      } else {
        list = [...list, index]
      }
      this.activeIndexList = list

      let datelistis = [...this.dates]
      for (let i = 0; i < datelistis.length; i++) {
        datelistis[i].is = false
      }
      list.forEach(idx => {
        if (idx >= 0 && idx < datelistis.length) {
          datelistis[idx].is = true
        }
      })

      this.$emit('change', list.map(idx => this.dates[idx]))
    },
    handleMultiTap(index) {
      if (this.readOnly) return
      this.selectDateMultiple(index)
    },
    // 显示全部
    showAll() {
      this.$emit('showall')
    }
  }
}
</script>

<style scoped>
.date-card-container {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.date-scroll {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
}

.scroll-content {
  display: inline-flex;
}

.date-card {
  width: calc(18vw - 30rpx);
  min-width: 90rpx;
  max-width: 120rpx;
  height: 140rpx;
  margin-right: 10rpx;
  margin-left: 10rpx;
  padding: 10rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.date-card.active {
  background-color: rgba(75, 121, 2, 1);
  color: #ffffff;
}

.date-card.active .date-text,
.date-card.active .week-text {
  color: #ffffff;
}

.date-text {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FC642F;
}

.week-text {
  display: block;
  font-size: 22rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #FC642F;
}

.point {
  position: absolute;
  top: 5rpx;
  right: 5rpx;
  min-width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
  font-size: 20rpx;
  line-height: 30rpx;
  color: white;
  text-align: center;
}

.point-red {
  background-color: red;
}

.point-blue {
  background-color: blue;
}

.fixed-all {
  width: 80rpx;
  height: 140rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ff6b35;
  border-left: 1px solid #eee;
  flex-shrink: 0;
  margin-right: 20rpx;
  position: relative;
}

.fixed-all::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10rpx;
  height: 100%;
  width: 10rpx;
  box-shadow: 5rpx 0 10rpx rgba(0, 0, 0, 0.1);
}

.all-text {
  font-size: 24rpx;
  margin-bottom: 0;
  display: block;
}

.period-text {
  font-size: 24rpx;
  display: block;
  margin-top: 2rpx;
}
</style>